<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax3以post方式传值处理</title>
  <script>
    function  ajax3(){

      //获取表单数据
      let name = document.querySelector(".name").value;
      let pwd = document.querySelector(".pwd").value;

      //1创建ajax对象
      let xmlHttpRequest = new XMLHttpRequest();
      //2配置向后端请求类型get post 异步请求数据
      xmlHttpRequest.open("post","/web_war_exploded/ajax2",true);
      //3监听数据是否请求成功
      xmlHttpRequest.onreadystatechange=function (){
        //服务和客户端握手
        if (xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
          if (xmlHttpRequest.status==200){
            //responseText获取后端返回的数据存入data
            let data=xmlHttpRequest.responseText;
            console.log("data"+data);
            //把data渲染前端页面
            document.getElementById("show").innerHTML=data;
          }
        }
      }
      xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
      //4发送请求
      xmlHttpRequest.send("name="+name+"&key="+pwd);
    }
  </script>
</head>
<body>
<div id="show" style="border: solid 3px red;width: 500px;height: 100px;background: lightgreen;">

</div>
姓名<input type="text" class="name"><br>
密码<input type="text" class="pwd"><br>
<button onclick="ajax3()">提交</button>

</body>
</html>